<template>
  <Uploader
    :action="'/api/upload'"
    :beforeUpload="beforeUpload"
    @uploaded="handleFileUploaded"
    class="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4"
  >
    <h2>点击上传头图</h2>
    <template #loading>
      <div class="d-flex">
        <div class="spinner-border text-secondary" role="status">
          <span class="sr-only">Loading</span>
        </div>
        <h2>正在上传</h2>
      </div>
    </template>
  </Uploader>
  <div class="home">
    <p>总课程数量: {{ total }}</p>
    <column-list :list="lists"></column-list>
    <button
      v-if="!isLastPage"
      @click="loadMorePage"
      class="btn btn-block btn-outline-primary mt-2 mb-5 mx-auto w-25"
    >
      加载更多
    </button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { useStore, ImageProps } from "@/store/index";
import ColumnList from "@/components/ColumnList.vue";
import Uploader from "@/components/Uploader.vue";
import { useLoadMore } from "@/hooks";

export default defineComponent({
  setup() {
    const store = useStore();
    const lists = computed(() => store.state.columnLists);
    const total = computed<number>(() => store.state.columnsTotal);
    const [isLastPage, loadMorePage] = useLoadMore("getColumns", total);

    loadMorePage();

    const beforeUpload = (file: File) => {
      const isImage = file.type.includes("image");

      return isImage || "请选择图片类型文件上传";
    };
    const handleFileUploaded = (imgData: ImageProps) => {
      console.info(`已上传图片url：${imgData.url}`);
    };

    return {
      lists,
      beforeUpload,
      handleFileUploaded,
      loadMorePage,
      isLastPage,
      total,
    };
  },
  components: {
    ColumnList,
    Uploader,
  },
});
</script>
<style lang="less">
.file-upload-container {
  height: 200px;
  cursor: pointer;
}
.btn-block {
  display: block;
}
</style>
